<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">	
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="../images/yc.png" type="image/x-icon">
<link rel="stylesheet" href="../css/layui.css"  media="all">
</head>
<body>
<br/>
<div id="app">
<form class="layui-form" id="myform" style="width:90%" onsubmit="return false">
	<div class="layui-form-item">
      	<label class="layui-form-label">库存号</label>
      	<div class="layui-input-inline" style="width: 25%">
        	<select name="tid" id="tno"><!-- lay-verify="required" 不能为空-->
				<option value="">请选择商品类型</option>
        	</select>
      	</div>
    	<label class="layui-form-label">商品编号</label>
    	<div class="layui-input-inline" style="width: 25%" @click="gg">
        	<select name="sid" id="sid" ><!-- lay-verify="required" 不能为空-->
				<option value="">请选择商品类型</option>
        	</select>
      	</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label" style="margin-top: 20px">商品尺寸</label>
    	<div class="layui-input-inline">
      		<input type="text" name="bsize"  placeholder="请输入商品尺寸" autocomplete="off" class="layui-input" style="width: 200px;margin-top: 20px" v-model="size"><!-- lay-verify="required" lay-reqtext="商品尺寸不能为空..." -->
		</div>
		<label class="layui-form-label" style="margin-top: 20px">商品颜色</label>
    	<div class="layui-input-inline">
      		<input type="text" name="bcolor" placeholder="请输入商品颜色" autocomplete="off" class="layui-input" style="width: 200px;margin-top: 20px" v-model="color">
		</div>
		<div style="float:left;border:2px solid #95B8E7;margin-right:10px;margin-bottom:10px;margin-left:200px;"> <img id="showpic_img5" style="display: none; width: 100px; height: 100px;"> </div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">添加数量</label>
    	<div class="layui-input-inline" style="width: 25%">
      		<input type="text" name="type" lay-verify="required" lay-reqtext="商品数量不可以为空..." placeholder="请输入要添加的数量" autocomplete="off" class="layui-input" style="width: 200px;" v-model="bnum">
		</div>
	</div>
	<div class="layui-form-item" style="margin-left: 20px;" id="showpic" ></div>
  	<div class="layui-form-item">
    	<div class="layui-input-block">
      		<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" @click="up">立即提交</button>
      		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
    	</div>
	</div>
</form>
</div>          
<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/layui.all.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/showpic.js" charset="utf-8"></script>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script src="../js/ajaxfileupload.js" charset="utf-8"></script>
<script src="../../js/show-dialog.js" charset="utf-8"></script>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/axios.js"></script>
<script type="text/javascript" src="../../js/qs.js"></script>
<script>
/**CKEDITOR.replace('goods_form_descr');
layui.use(['form'], function(){
	var form = layui.form, layer = layui.layer;
  
	$.get("../../balance/findList", null, rt => {
		if(rt.code == 200){
			let str = "";
			$.each(rt.data, function(index, item) {
				str += "<option value='" + item.bid + "'>" + item.bid + "</option>";
			})
			$("#tno").append($(str));
		}
		form.render('select');
	}, "json");
	
	$.get("../../product/lists", null, rt => {
		if(rt.code == 200){
			let str = "";
			$.each(rt.data, function(index, item) {
				str += "<option value='" + item.pid + "'>" + item.pid +"商品号,名称"+item.sname + "</option>";
			})
			$("#sid").append($(str));
		}
		form.render('select');
	}, "json");
	
	// 自定义验证规则
	form.verify({
    	title: function(value){
      		if(value.length < 2){
        		return '商品名称至少得2个字符...';
      		}
    	}
	});
  
	// 监听提交
  	form.on('submit(demo1)', function(data){
  		/* var obj = JSON.stringify(data.field);
  		console.info(obj);
  		return false; 
  		
  		let tno = $("#tno").val();
  		let sid = $("#sid").val();
  		console.log(tno,sid,"tno");
  		
  		/**let obj = data.field;
  		obj.descr = CKEDITOR.instances.goods_form_descr.getData();
  		$.ajaxFileUpload({
  			url: "../../balance/addNum",
  			secureuri: false,
  			fileElementId: "photos",
  			data: obj,
  			dataType: "json",
  			success: function(rt, status) {
  				if(rt.code == 511) {
  					showmsg(rt.msg, "red");
  					return false;
  				}
  				
  				if(rt.code == 200) {
  					$("#myform")[0].reset();
  					$("#showpic").html("");
  					CKEDITOR.instances.goods_form_descr.setData("");
  					layui.form.render();
  					showmsg("商品信息添加成功...", "green");
  					return false;
  				}
  				showmsg("添加失败,请稍后重试...\n" + e, "red");
  			},
  			error: function(rt, status, e) {
  				showmsg("添加失败,请稍后重试...\n" + e, "red");
  				return false;
  			}
  		})
  		return false; 
	});
});**/
let app = new Vue({
	 el:'#app',
	 data:{
		 size:null,
		 color:null,
		 bnum:0,
		 product:{},
		 pics:null,
		 judage:true
		 
	 },
	 methods:{
		 up: function(){
			 console.log(this.size,this.color,this.bnum,"app");
			 let value = $("#sid").val();
			 let value2 = $("#tno").val();
			 if(this.bnum <=0 ){
				 showmsg("库存不能小于等于0......","yellow");
				 return;
			 }
			 if(value2 != null && value2 != ""){
				 axios.post("../../balance/addNum",qs.stringify({bid:value2,bnum:this.bnum})).then(rt =>{
					 if(rt.data.code == 200 ){  //发送成功  SUCCESS
							showmsg("成功.....","green");
							return;
						}
					 
					 if(rt.data.code == 500){ //错误  ERROR
							showmsg("错误.....","red");
							return;
						}
				 })
			 }else{
				 if(value == null || value == "" || this.size == null || this.size == "" || this.color == null || this.color == ""){
					 showmsg("请填写完整.....","yellow");
				 }
				axios.post("../../balance/addNums",qs.stringify({pid:value,bnum:this.bnum,bsize:this.size,bcolor:this.color})).then(rt =>{
					 if(rt.data.code == 200 ){  //发送成功  SUCCESS
							showmsg("成功.....","green");
					 		location.reload();
							return;
						}
					 if(rt.data.code == 500){ //错误  ERROR
							showmsg("错误.....","red");
							return;
						}
				 })
			 }
			 
			 
		 },
		 gg: function(){
			let value = $("#sid").val();
			console.log(value,"value");
			if(this.judage){
				confirm("如果库存号有值,优先库存号.....");
				this.judage = false;
			}
			
			$("#showpic_img5").css("display","block");
			$.each(this.product, function(index, item) {
				if(item.pid == value){
					$("#showpic_img5").prop("src","/"+item.pics + "");
				}
			})
			
		 }
	 },
	 mounted(){
		 var form = layui.form, layer = layui.layer;
			$.get("../../balance/findList", null, rt => {//？ 为什么不能直接balance/findList
				if(rt.code == 200){
					let str = "";
					$.each(rt.data, function(index, item) {
						str += "<option value='" + item.bid + "'>" + item.bid + "</option>";
					})
					$("#tno").append($(str));
				}
				form.render('select');
			}, "json");
			
			$.get("../../product/lists", null, rt => {
				if(rt.code == 200){
					let str = "";
					$.each(rt.data, function(index, item) {
						str += "<option value='" + item.pid + "'>" + item.pid +" 号商品,名称   "+item.pname + "</option>";
					})
					$("#sid").append($(str));
					this.product = rt.data;
				}
				form.render('select');
			}, "json");
	 },
	 created(){
		 
	 }
 })
</script>
</body>
</html>